<template>
  <div>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div
          class="widget-head am-cf"
          v-if="!isComponent"
        >
          <div class="widget-title  am-cf">学生列表</div>
        </div>
        <div class="widget-body  am-fr">

          <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
            <div class="am-form-group">
              <input
                type="text"
                @keyup.enter="search"
                class="am-form-field es-search"
                placeholder="请输入学生编号／姓名／手机号"
                v-model="query.keyword"
              >
            </div>
          </div>

          <div class="am-u-sm-12 am-u-md-12 am-u-lg-6 am-u-end">
            <div class="am-form-group">
              <button
                class="am-btn  am-btn-default am-btn-success  am-icon-search am-fl"
                type="button"
                @click="search"
              >查询</button>
              <button
                class="am-btn  am-btn-default am-btn-success am-fl"
                type="button"
                @click="addStudent"
                v-if="showAddStudent"
              ><span class="am-icon-plus"></span>新增学员</button>
            </div>
          </div>
          <div
            class="am-u-sm-12"
            v-if="tableData&&tableData.length>0"
          >
            <el-table
              :data="tableData"
              border
              stripe
              style="min-width: 100%"
            >
              <el-table-column
                fixed
                label="学号"
                min-width="150"
              >
                <template scope="scope">
                  {{scope.row.studentNo }}
                </template>
              </el-table-column>
              <el-table-column
                fixed
                prop="name"
                label="姓名"
                min-width="100"
              >
              </el-table-column>

              <el-table-column
                fixed
                prop="phoneNo"
                label="手机号码"
                min-width="120"
              >
              </el-table-column>
              <el-table-column
                prop="lastRegCampusName"
                label="最近报读校区"
                min-width="150"
              >
              </el-table-column>
              <el-table-column
                prop="school"
                label="就读学校"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                prop="gradeName"
                label="年级"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                prop="location"
                label="地区"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                label="出生日期"
                min-width="150"
              >
                <template scope="scope">
                  {{scope.row.birthday | formatDate }}
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="200"
              >
                <template scope="scope">
                  <el-button
                    size="small"
                    @click.native="sureFunc(scope.row.studentId, scope.row.name)"
                  >确认</el-button>
                  <el-button
                    size="small"
                    @click.native="toStudentInfo(scope.row)"
                  >更多数据分析</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="am-u-lg-12 am-cf">
            <div class="am-fr">
              <pagination
                v-bind:total="total"
                v-bind:pageNo="pageNo"
                v-bind:pageSize="pageSize"
                @paging="loadTableData"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import io from '../../lib/io'

import Pagination from '../base/Pagination'

export default {
  data: function() {
    return {
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNo: 1,
      query: {},
      showAddStudent: true
    }
  },
  props: {
    isComponent: {
      type: Boolean,
      default: false
    },
    courseOrder: {
      type: String,
      default: ''
    }
  },
  components: {
    Pagination
  },
  watch: {},
  mounted: function() {
    $(window).smoothScroll()
    if (this.courseOrder === 'yes') {
      this.showAddStudent = false
    }
  },
  methods: {
    addStudent() {
      if (this.isComponent) {
        this.$emit('addStudent')
      }
      this.$router.push('/main/enroll/student/add')
    },
    sureFunc(studentId, studentName) {
      if (!this.isComponent) {
        this.$router.push('/main/enroll/student/reg/' + studentId)
      } else if (!this.courseOrder) {
        this.$router.push('/main/enroll/student/search/' + studentId)
        this.$emit('sureFunc', studentId, studentName)
      } else if (this.courseOrder === 'yes') {
        this.$emit('sureFunc', studentId, studentName)
      }
    },
    toStudentInfo(student) {
      let param = {
        studentName: student.name,
        phone: student.phoneNo
      }
      var w = window.open('_blank')
      io.post(io.apiFindMoreStudentInfo, param, ret => {
        if (ret.success) {
          w.location = ret.data
          // var a = document.createElement('a');
          // a.setAttribute('href', ret.data);
          // a.setAttribute('target', '_blank');
          // a.setAttribute('id', ret.data);
          // // 防止反复添加
          // if(!document.getElementById(ret.data)) {
          //     document.body.appendChild(a);
          // }
          // a.click();
          // setTimeout(()=>{
          //   window.open(ret.data);
          // }, 500);
        } else {
          this.$alert(ret.desc)
        }
      })
    },
    search: function() {
      document.querySelector('.es-search').blur()
      if (!this.query.keyword) {
        this.$alert('请输入学生编号／姓名／手机号')
        return
      }
      this.loadTableData(1)
    },
    loadTableData: function(pageNo) {
      var _this = this
      _this.pageNo = pageNo || _this.pageNo || 1
      // _this.$showLoading()
      io.post(
        io.apiAdminSearchStudent,
        $.extend(
          {
            pageNo: _this.pageNo,
            pageSize: _this.pageSize
          },
          _this.query
        ),
        function(ret) {
          // _this.$hiddenLoading()
          if (ret.success) {
            _this.total = ret.data.total
            _this.tableData = ret.data.list

            if (_this.total == 0) {
              _this.$confirm(
                '没有查询到对应的学生信息，请进行添加新学员的操作',
                function() {
                  if (_this.isComponent) {
                    _this.$emit('closeWindow')
                  }
                  _this.$router.push('/main/enroll/student/add')
                }
              )
            }
          } else {
            _this.$alert(ret.desc)
          }
        }
      )
    }
  }
}
</script>
